AJAX (Asynchronous JavaScript and XML) একটি প্রযুক্তি যা ব্রাউজারকে ওয়েব পেজের অংশের ডেটা asynchronously (পৃষ্ঠাটি পুনরায় লোড না করেই) সার্ভার থেকে নেওয়ার সুবিধা দেয়। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য ওয়েব অ্যাপ্লিকেশনগুলিতে ডাইনামিক কন্টেন্ট লোড এবং ইন্টারঅ্যাক্টিভ কার্যকারিতা প্রদান করে।
এখানে AJAX ব্যবহার করে API কল করার একটি উদাহরণ দেয়া হল:
১. AJAX API কলের প্রাথমিক গঠন
এখানে একটি সাধারণ AJAX কলের উদাহরণ দেয়া হচ্ছে যা একটি RESTful API থেকে ডেটা নিয়ে আসে।
HTML (যেখানে আমরা ডেটা দেখাবো)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX API Call Example</title>
</head>
<body>
<h2>API Response:</h2>
<div id="api-data"></div>
<script src="script.js"></script>
</body>
</html>JavaScript (AJAX কল করার স্ক্রিপ্ট)
// script.js
// ফাংশন তৈরি করা API কল করার জন্য
function fetchAPIData() {
// নতুন XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// API URL
var url = "https://api.example.com/data"; // এখানে আপনার API URL দিন
// API কলের জন্য প্রস্তুত করা
xhr.open("GET", url, true);
// যখন রেসপন্স আসে তখন কার্য সম্পাদন
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// রেসপন্স থেকে ডেটা পেতে JSON প্যার্স করা
var data = JSON.parse(xhr.responseText);
// ডেটা HTML এ দেখানো
document.getElementById("api-data").innerHTML = JSON.stringify(data, null, 2);
} else {
console.error("API Call Failed: " + xhr.statusText);
}
};
// API কল ব্যর্থ হলে error হ্যান্ডলিং
xhr.onerror = function() {
console.error("Request failed");
};
// API কল শুরু করা
xhr.send();
}
// ফাংশন কল করা
fetchAPIData();২. কী কী ঘটছে এখানে?
- XMLHttpRequest অবজেক্ট: এটি AJAX কল তৈরি করার জন্য ব্যবহৃত হয়। এই অবজেক্টটি ওয়েব ব্রাউজারের সাথে সার্ভারের যোগাযোগকে পরিচালনা করে।
openমেথড: এটি HTTP রিকোয়েস্টকে প্রস্তুত করে। প্রথম প্যারামিটার হল HTTP মেথড (এখানে "GET"), দ্বিতীয় প্যারামিটার হল API URL এবং তৃতীয় প্যারামিটার হলtrue, যা নির্দেশ করে যে এটি অ্যাসিঙ্ক্রোনাস কল হবে।onloadইভেন্ট: এই ফাংশনটি তখনই ট্রিগার হয় যখন API থেকে সফলভাবে ডেটা ফেরত আসে। এখানে JSON ডেটাকে প্যার্স করে HTML এ দেখানো হচ্ছে।onerrorইভেন্ট: এই ফাংশনটি তখনই কাজ করে যখন কোনো সমস্যা হয়, যেমন নেটওয়ার্কের সমস্যা বা সার্ভার থেকে কোনো রেসপন্স না পাওয়া।send()মেথড: এটি AJAX কলকে কার্যকর করে এবং সার্ভারে রিকোয়েস্ট পাঠায়।
৩. AJAX API Call with Fetch API (Modern Way)
যেহেতু XMLHttpRequest পুরনো এবং একটু জটিল হতে পারে, আধুনিক ওয়েব ডেভেলপমেন্টে fetch API ব্যবহৃত হয়, যা সহজ এবং ব্যবহারকারী বান্ধব।
// Fetch API ব্যবহার করে API কল
function fetchAPIData() {
fetch("https://api.example.com/data") // API URL
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(data => {
// ডেটা HTML এ দেখানো
document.getElementById("api-data").innerHTML = JSON.stringify(data, null, 2);
})
.catch(error => {
console.error("Fetch error: " + error.message);
});
}
// ফাংশন কল করা
fetchAPIData();৪. উল্লেখযোগ্য পয়েন্ট
- CORS (Cross-Origin Resource Sharing): যদি আপনি ক্রস-ডোমেইন API কল করতে চান, তবে আপনাকে CORS সমস্যা মোকাবেলা করতে হবে। সার্ভারটি CORS হেডার সাপোর্ট করছে কি না, তা নিশ্চিত করতে হবে।
- ব্যাচ API কল: আপনি যদি একাধিক API কল করতে চান, তবে JavaScript এর
Promise.all()ব্যবহার করে ব্যাচ API কল করা যায়।
সারাংশ
AJAX ব্যবহার করে API কল করা মানে হলো, আপনি ওয়েব পেজ রিফ্রেশ না করে সার্ভারের সাথে যোগাযোগ করতে পারবেন এবং তা থেকে ডেটা নিয়ে ওয়েব পেজে ডাইনামিকভাবে দেখাতে পারবেন। XMLHttpRequest এবং আধুনিক fetch API উভয়ই AJAX কলের জন্য ব্যবহৃত হয়, তবে fetch API আধুনিক এবং সহজ।
Read more
